<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 搜索区域 -->
        <div class="filter-bar">
          <!-- 筛选表单 -->
          <div class="l-form">
            <el-input size="small" placeholder="请输入内容" v-model="query" style="width:200px"></el-input>
            <div class="btn-L">
              <el-button type="default" size="small" @click="resetQuery">清空</el-button>
              <el-button type="primary" size="small" @click="searchQuery">搜索</el-button>
            </div>
          </div>
          <!-- 右侧按钮 -->
          <div class="r-btn">
            <el-button type="success" size="small" icon="el-icon-edit" @click="userAdd">新增用户</el-button>
          </div>
        </div>
        <el-alert :title="'共' + total + '条数据'" type="info" show-icon></el-alert>
        <!-- 表格区域 -->
        <div class="table-box">
          <!-- 表格 -->
          <el-table :data="userinfo">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column label="邮箱" prop="email" width="300"></el-table-column>
            <el-table-column label="联系电话" prop="phone"></el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="权限组名称" prop="permission_group_title"></el-table-column>
            <el-table-column label="角色" prop="role"></el-table-column>
            <el-table-column label="操作" prop="username">
              <template slot-scope="scope">
                <el-button plain type="primary" size="default" circle icon="el-icon-edit" @click="editUSer(scope.row)"></el-button>
                <el-button plain v-if="scope.row.username !== '超级管理员'" type="danger" size="default" circle icon="el-icon-delete" @click="delUser(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页组件 -->
        <page-tool :total="total" :pagenum="pagenum" :pagesize="pagesize" @pageSizeChange="sizeChange" @pageChange="pageChange" />

        <!-- 添加/编辑用户组件 -->
        <el-dialog :title="isAdd ? '添加用户' : '修改用户'" :visible.sync="userDialog" width="30%" @close="close">
          <user-add v-if="userDialog" @close="close" :user-form="editFormInfo" :state="isAdd" :permissions="permissions" />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/users'
import { list as permissions } from '@/api/base/permissions'
import userAdd from '../components/user-add.vue'
import PageTool from '../components/page-tool'
export default {
  components: { userAdd, PageTool },
  name: 'base-users',
  data() {
    return {
      query: '', // 搜索框变量
      userinfo: [], // 用户信息列表
      pagesize: 5, // 页码
      pagenum: 1, // 每页条目
      total: 0, // 总数
      userDialog: false, // 添加/编辑用户弹窗是否显示
      isAdd: true, // 是否是添加用户
      editFormInfo: {}, // 编辑用户信息

      permissions: [], // 权限列表
      title: '',
      editFormRules: {
        username: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
        ]
      }
    }
  },
  created() {
    this.getUserInfo()
    this.getpermissions()
  },
  methods: {
    // 获取权限组列表
    async getpermissions() {
      // try {
      let { data: res } = await permissions({
        page: this.pagenum,
        pagesize: this.pagesize,
        title: this.title
      })
      this.permissions = res.list

      // } catch (error) {
      //   this.$message.error('获取失败')
      // }
    },
    // 获取用户列表
    async getUserInfo() {
      try {
        let { data: res } = await list({
          page: this.pagenum,
          pagesize: this.pagesize,
          username: this.query
        })
        this.userinfo = res.list

        this.total = res.counts
      } catch (error) {
        this.$message.error('获取用户列表失败')
      }
    },
    // 清空
    resetQuery() {
      this.query = ''
      this.pagenum = 1
      this.pagesize = 10
      this.getUserInfo()
    },
    // 搜索按钮
    searchQuery() {
      this.pagesize = 1
      this.getUserInfo()
    },
    // 页码数量发生改变
    sizeChange(val) {
      this.pagesize = val
      this.getUserInfo()
    },
    // 页码变化
    pageChange(val) {
      this.pagenum = val
      this.getUserInfo()
    },
    userAdd() {
      this.userDialog = true
    },
    // 编辑用户
    editUSer(row) {
      this.userDialog = true
      this.isAdd = false
      this.editFormInfo = {
        email: row.email,
        avatat: row.avatat,
        id: row.id,
        introduction: row.introduction,
        permission_group_id: row.permission_group_id,
        phone: row.phone,
        role: row.role,
        username: row.username
      }
    },

    // 删除用户
    async delUser(row) {
      // 确认弹框,确定返回confirm字段,取消 抛出错误
      await this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      await remove({
        id: row.id
      })
      if (this.pagenum !== 1 && this.userinfo.length == 1) {
        this.pagenum--
      }
      // console.log(res);
      this.$message.success('删除成功')
      this.getUserInfo()
    },
    close() {
      this.userDialog = false
      this.isAdd = true
      this.editFormInfo = {}
      this.getUserInfo()
    }
  }
}
</script>

<style scoped>
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.btn-L {
  display: inline-block;
  margin-left: 20px;
}
.el-alert {
  margin: 10px;
}
</style>
